<template>
  <div class="personal">
    <el-backtop :visibility-height="100"></el-backtop>
    <el-row type="flex" class="row-title">
      <img src="@/assets/images/1.png" alt=""/>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="career-route">
        <el-breadcrumb-item class="career-title" :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/personal' }">个人中心</el-breadcrumb-item>
      </el-breadcrumb>
      <img src="@/assets/images/2.png" alt=""/>
    </el-row>
    <el-skeleton :loading="loading" animated>
      <template slot="template">
        <el-card class="user-info">
          <el-row type="flex" justify="left" :gutter="20">
            <el-col :span="3">
              <el-skeleton-item variant="text" style="width: 75px;height: 75px"></el-skeleton-item>
              <el-button style="position: relative; left: 12px;bottom: 8px" type="text"></el-button>
            </el-col>
            <el-col
                style="display: flex; flex-flow: column;justify-content: space-evenly;position: relative; bottom: 15px;">
              <el-skeleton-item variant="text" style="width: 125px;height: 25px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 225px;height: 25px"></el-skeleton-item>
            </el-col>
            <el-col
                style="display: flex; flex-flow: column;justify-content: space-evenly;position: relative; bottom: 15px">
              <el-skeleton-item variant="text" style="width: 200px;height: 25px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 300px;height: 25px"></el-skeleton-item>
              <el-skeleton-item variant="text" style="width: 200px;height: 25px"></el-skeleton-item>
            </el-col>
          </el-row>
        </el-card>
      </template>
      <template>
        <el-card class="user-info">
          <el-row type="flex" justify="left" :gutter="20">
            <el-col :span="3">
              <el-avatar :src="server + user_all.user_image" :size="80"></el-avatar>
              <el-button style="position: relative; left: 12px;bottom: 8px" type="text" @click="openAvatarDialog">更改头像</el-button>
              <el-dialog
                  title="更改头像"
                  accept=".jpg .png"
                  :visible.sync="changeAvatarDialogVisible"
                  :modal-append-to-body='false'
                  :close-on-click-modal="false"
                  width="500px"
                  append-to-body
                  :before-close="handleChangeAvatarDialogClose">
                <el-row type="flex" justify="center">
                  <el-upload
                      class="upload-demo"
                      ref="upload-avatar"
                      drag
                      :limit="1"
                      :headers="headers"
                      :on-success="handleAvatarSuccess"
                      :on-error="handleAvatarError"
                      :before-upload="beforeAvatarUpload"
                      action="/api/user/user/avatar/change"
                      multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" style="margin-left: 65px;" slot="tip">只能上传jpg/png文件，且不超过2mb</div>
                  </el-upload>
                </el-row>
              </el-dialog>
            </el-col>
            <el-col
                style="display: flex; flex-flow: column;justify-content: space-evenly;position: relative; bottom: 15px;width: 750px">
              <el-row type="flex" style="font-size: 20px">
                {{ user.name ? user.name : '' }} &nbsp; {{ user.sex ? user.sex : '' }}
              </el-row>
              <el-row style="font-size: 15px; color: #838383;">
                {{ user.age ? user.age : '' + '岁' }}
                <el-divider direction="vertical"></el-divider>
                {{ user.work_status ? user.work_status : '' }}
                <el-divider direction="vertical"></el-divider>
                {{ user.address ? user.address : '' }}
              </el-row>
            </el-col>
            <el-col v-if="user_all.elseInfo"
                    style="display: flex; flex-flow: column;justify-content: space-evenly;position: relative; bottom: 15px;">
              <el-row style="font-size: 20px">期望:&nbsp;&nbsp;{{ user_all.elseInfo.expect_career }}&nbsp;&nbsp;
                {{ user_all.elseInfo.education }}
              </el-row>
              <el-row style="font-size: 15px; color: #838383;">{{ user_all.elseInfo.university }} ·
                {{ user_all.elseInfo.specialty }}
              </el-row>
              <el-row style="font-size: 15px; color: #838383;">{{ msToDate(user_all.elseInfo.start_time).withoutTime }}
                - {{ msToDate(user_all.elseInfo.end_time).withoutTime }}
              </el-row>
            </el-col>
            <el-col v-else
                    style="display: flex; flex-flow: column;justify-content: space-evenly;position: relative; bottom: 15px;">
              <el-link type="info" :underline="false">用户其他信息为空，请前去添加</el-link>
            </el-col>
          </el-row>
        </el-card>
      </template>
    </el-skeleton>
    <el-card class="change-user-info" shadow="never" style="margin-top: 50px">
      <div slot="header">个人信息</div>
      <el-tabs v-model="activeName" type="card" tab-position="left">
        <el-tab-pane name="first" class="base_form">
          <span slot="label"><i class="el-icon-user-solid"></i>基本信息</span>
          <el-form :model="base_form" ref="base_form" size="small" :rules="rules" style="width: 600px" :inline="true"
                   label-width="80px" v-loading="loading">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="base_form.name" placeholder="请输入真实姓名" clearable/>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="base_form.age" placeholder="请输入年龄" clearable/>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="base_form.sex" clearable placeholder="请选择性别" class="search-select">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工作状态" prop="work_status">
              <el-select v-model="base_form.work_status" clearable placeholder="请选择工作状态" class="search-select">
                <el-option label="已工作" value="已工作"></el-option>
                <el-option label="未工作" value="未工作"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系号码" prop="phone_number">
              <el-input v-model="base_form.phone_number" placeholder="请输入联系号码" clearable/>
            </el-form-item>
            <el-form-item label="联系邮箱" prop="email">
              <el-input v-model="base_form.email" placeholder="请输入联系邮箱" clearable/>
            </el-form-item>
            <el-form-item label="所在城市" prop="address">
              <el-cascader
                  placeholder="请选择公司城市"
                  clearable
                  :options="city"
                  :show-all-levels="false"
                  v-model="base_form.address"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="base_form.password" placeholder="请输入需要修改的密码" type="password" show-password
                        clearable/>
            </el-form-item>
          </el-form>
          <el-button class="any-button" :disabled="btn1_loading" @click="handleModifyBaseInfo">提交</el-button>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="second" class="else_form">
          <span slot="label"><i class="el-icon-document"></i>其他信息</span>
          <el-form :model="else_form" ref="else_form" size="small" :rules="rules2" style="width: 600px" :inline="true"
                   label-width="80px" v-loading="loading">
            <el-form-item label="期望职位" prop="expect_career">
              <el-input v-model="else_form.expect_career" placeholder="请输入期望职位" clearable/>
            </el-form-item>
            <el-form-item label="学历" prop="education">
              <el-select v-model="else_form.education" clearable placeholder="请选择学历" class="search-select">
                <el-option v-for="education in degreeOptions" :key="education.label"
                           :label="education.label" :value="education.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所在院校" prop="university">
              <el-input v-model="else_form.university" placeholder="请输入所在院校" clearable/>
            </el-form-item>
            <el-form-item label="所在专业" prop="specialty">
              <el-input v-model="else_form.specialty" placeholder="请输入所在专业" clearable/>
            </el-form-item>
            <el-form-item label="开始时间" prop="start_time">
              <el-date-picker
                  v-model="else_form.start_time"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="end_time">
              <el-date-picker
                  v-model="else_form.end_time"
                  type="date"
                  format="yyyy 年 MM 月 dd 日"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <el-button class="any-button" :disabled="btn2_loading" @click="handleModifyElseInfo">提交</el-button>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-row class="resume-user-info">
      <el-card style="border-radius: 15px;" shadow="never">
        <div slot="header">
          <span>历史投递</span>
          <el-tooltip class="item" effect="dark" content="刷新数据" placement="top">
            <el-button style="float: right;" icon="el-icon-refresh" size="mini" @click="getDeliver" circle></el-button>
          </el-tooltip>
        </div>
        <el-row>
          <el-table
              v-loading="table_loading"
              border
              max-height="350"
              :data="deliver"
              style="width: 100%">
            <el-table-column
                type="index"
                label="序号"
                align="center"
                width="50">
            </el-table-column>
            <el-table-column
                prop="job.job_name"
                label="职位"
                align="center"
                width="175">
            </el-table-column>
            <el-table-column
                prop="job.job_price"
                label="薪资"
                align="center"
                width="85">
            </el-table-column>
            <el-table-column
                prop="company.company"
                label="公司"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                align="center"
                label="简历文件名"
                width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.resume_type === 'online'">{{ scope.row.resume.resume_title }}</span>
                <span v-if="scope.row.resume_type === 'file'">{{ scope.row.file.file_name }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="audit_status"
                align="center"
                label="审核状态"
                width="140">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100">
              <template slot-scope="scope">
                <el-button @click="handleCheckProcess(scope.row.id)" type="text" size="small">查看</el-button>
                <el-button @click="handleWithdraw(scope.row)" :disabled="scope.row.audit_status !== '已提交，等待审核'" type="text" size="small">撤回</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-dialog
            title="投递详情"
            class="deliver-info"
            :visible.sync="deliverInfoVisible"
            :modal-append-to-body='false'
            :close-on-click-modal="false"
            width="550px"
            append-to-body
            :before-close="handleDeliverInfoDialogClose">
          <div v-loading="deliver_loading">
            <el-timeline style="margin-left: 30px" :reverse="false">
              <el-timeline-item
                  class="item"
                  v-for="(activity, index) in activities"
                  :timestamp="activity.create_time"
                  :key="activity.id"
                  placement="top"
                  :icon="index === 0 ? 'el-icon-loading': 'el-icon-check'"
                  :color="index !== 0 ? '#0bbd87' : ''"
                  :type="index === 0 ? 'primary' : ''"
                  size="large"
              >
                <el-card v-if="activities.state_content !== null && activities.state_content !== ''" style="border-radius: 10px;width: 400px">
                  <div slot="header">备注</div>
                  <div>{{ activity.state_content }}</div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            <el-divider></el-divider>
            <el-row type="flex" justify="center">
              <span style="margin:auto;color: black;font-size: 16px">请耐心等待处理</span>
            </el-row>
          </div>
        </el-dialog>
      </el-card>
    </el-row>
  </div>
</template>

<script>

import store from "@/store";
import {mapGetters} from "vuex";
import {Message} from "element-ui";
import {msToDate} from "@/utils/format"
import {getToken} from "@/utils/auth";

export default {
  name: "personal",
  data() {
    return {
      activeName: 'first',
      resumeActiveName: '',
      loading: false,
      btn1_loading: false,
      btn2_loading: false,
      server: window.application.minio_host,
      base_form: {},
      else_form: {},
      degreeOptions: [{
        value: '硕士',
        label: '硕士'
      }, {
        value: '本科',
        label: '本科'
      }, {
        value: '专科',
        label: '专科'
      }],
      // 表单校验
      rules: {
        name: [
          {required: true, message: '岗位名称不能为空', trigger: ['blur', 'change']},
        ],
        age: [
          {required: true, message: '岗位薪资不能为空', trigger: ['blur', 'change']},
        ],
        sex: [
          {required: true, message: '岗位地址不能为空', trigger: ['blur', 'change']},
        ],
        email: [
          {required: true, message: '岗位类型不能为空', trigger: ['blur', 'change']}
        ],
        phone_number: [
          {required: true, message: '学历要求不能为空', trigger: ['blur', 'change']}
        ],
        address: [
          {required: true, message: '岗位状态不能为空', trigger: ['blur', 'change']}
        ],
        work_status: [
          {required: true, message: '岗位要求不能为空', trigger: ['blur', 'change']},
        ]
      },
      rules2: {
        expect_career: [
          {required: true, message: '期望职位不能为空', trigger: ['blur', 'change']},
        ],
        education: [
          {required: true, message: '学历不能为空', trigger: ['blur', 'change']},
        ],
        university: [
          {required: true, message: '所在院校不能为空', trigger: ['blur', 'change']},
        ],
        specialty: [
          {required: true, message: '所在专业不能为空', trigger: ['blur', 'change']}
        ],
        start_time: [
          {required: true, message: '开始时间不能为空', trigger: ['blur', 'change']}
        ],
        end_time: [
          {required: true, message: '结束时间不能为空', trigger: ['blur', 'change']}
        ]
      },
      table_loading: false,

      deliverInfoVisible: false,
      deliver_loading: false,
      activities: [],

      changeAvatarDialogVisible: false,
      headers: {
        token: getToken()
      },
    }
  },
  mounted() {
    this.getList();
    this.open()
  },
  methods: {
    msToDate,
    async getList() {
      this.loading = true
      await this.$store.dispatch("app/getUserAllInfoById", this.user.id)
          .then((resp) => {
            if (resp) {
              this.base_form = this.user
              this.base_form.password = ''
              this.else_form = {...this.user_all.elseInfo}
              setTimeout(() => {
                this.loading = false
              }, 1500)
            }
          })
      await this.getDeliver()
    },
    getDeliver() {
      this.table_loading = true
      this.$store.dispatch("app/queryUserDeliveredCareersByUserId", this.user.id)
          .then((resp) => {
          }).catch((error) => {
        this.$message.error(error)
      }).finally(() => {
        setTimeout(() => {
          this.table_loading = false
        }, 1500)
      })
    },
    open() {
      this.$notify.success({
        title: '提示',
        message: '请认真填写信息，或将影响就业',
        offset: 200,
        duration: 5000
      });
    },
    handleModifyBaseInfo() {
      this.$refs['base_form'].validate(valid => {
        if (valid) {
          this.btn1_loading = true
          if (this.base_form.address.length === 2) this.base_form.address = this.base_form.address[1]
          const data = {id: this.user.id, data: this.base_form}
          this.$store.dispatch("app/modifyUserBaseInfo", data).then((resp) => {
            if (resp.data.data) this.$message.success("个人基本信息修改成功！")
          }).finally(() => {
            this.getList()
            setTimeout(() => {
              this.btn1_loading = false
            }, 1500)
          })
        }
      })
    },
    handleModifyElseInfo() {
      this.$refs['else_form'].validate(valid => {
        if (valid) {
          this.btn2_loading = true
          const data = {id: this.user.id, data: this.else_form}
          data.data.end_time = msToDate(data.data.end_time).hasTime
          data.data.start_time = msToDate(data.data.start_time).hasTime
          this.$store.dispatch("app/modifyUserElseInfo", data).then((resp) => {
            if (resp.data.data) this.$message.success("个人其他信息修改成功！")
          }).finally(() => {
            this.getList()
            setTimeout(() => {
              this.btn2_loading = false
            }, 1500)
          })
        }
      })
    },
    handleCheckProcess(id) {
      this.deliverInfoVisible = true
      this.deliver_loading = true
      this.$store.dispatch("app/getDeliverHistoryById", id)
          .then((resp) => {
            this.activities = resp
          }).catch((error) => {
        this.$message.error(error)
        this.deliverInfoVisible = false
      }).finally(() => {
        setTimeout(() => {
          this.deliver_loading = false
        }, 1500)
      })
    },
    handleDeliverInfoDialogClose() {
      this.deliverInfoVisible = false
      this.activities = []
    },
    handleWithdraw(data) {
      this.$confirm(`确认撤回对 ${data.job.job_name } 职位的投递?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch("app/withdrawDeliverHistory", data.id)
            .then((resp) => {
              if (resp) {
                this.$message.success("成功撤回！")
                this.getDeliver()
              }
            }).catch((error) => {
              this.$message.error(error)
        })
      }).catch(() => {});
    },
    openAvatarDialog() {
      this.changeAvatarDialogVisible = true
    },
    handleChangeAvatarDialogClose() {
      this.changeAvatarDialogVisible = false
    },
    handleAvatarSuccess(response) {
      if (response.code === 1) {
        this.changeAvatarDialogVisible = false
        setTimeout(() => {
          location.reload()
        },2000)
        this.$message.success("头像更改成功 2秒后自动刷新~")
      }
    },
    handleAvatarError(response) {
      location.reload();
      this.$message.success("头像更改失败")
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg' || "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
        return false
      }
      return isJPG && isLt2M;
    }
  },
  computed: {
    ...mapGetters(['user', 'user_all', 'city', 'deliver'])
  },
  beforeRouteEnter(to, from, next) {
    if (store.getters.token === undefined || store.getters.token === '') {
      Message.error("未登录无权访问！")
      next("/")
    }
    next()
  },
}
</script>

<style scoped>
.personal {
  background: linear-gradient(to bottom, #dfeef1, 1%, white);
}

.row-title {
  height: 130px;
  background-color: #26b2b2;
  justify-content: space-evenly;
}

.career-route {
  line-height: 130px;
}

.el-breadcrumb ::v-deep .el-breadcrumb__inner {
  color: #fdfdfd !important;
}

::v-deep .el-breadcrumb__item {
  font-size: 20px;
}

.user-info {
  margin: 25px auto;
  width: 900px;
  min-width: 900px;
  height: 140px;
  border-radius: 15px;
}

.change-user-info {
  margin: 25px auto;
  width: 900px;
  min-width: 900px;
  border-radius: 15px;
}

.base_form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.else_form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
}

.any-button {
  width: 150px;
  background-color: #dbecef;
  color: #28b8b8;
  border: none;
}

.any-button:hover {
  color: white;
  background-color: #28b8b8;
}

.any-button:focus {
  color: white;
  background-color: #28b8b8;
}

.resume-user-info {
  margin: 10px auto auto;
  width: 900px;
  min-width: 900px;
}

</style>
